<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        /* INPUT[type='range'] Shadow Elements Selectors *
 * ============================================= */

        body {
            font-family: 'Averia Sans Libre', cursive;
            height: 100vh;
            overflow: hidden;
            background-image: linear-gradient(45deg, white 0%, white 25%, transparent 25%, transparent 50%, white 50%, white 75%, transparent 75%, transparent 100%), linear-gradient(to bottom right, rgba(128, 0, 128, 0.2), rgba(128, 0, 128, 0.1), rgba(255, 165, 0, 0.1) 50%, rgba(255, 165, 0, 0.5));
            background-size: 6em 6em, cover;
        }
        h1 {
            margin: 50vh 0;
            padding: 0;
            line-height: 5em;
            font-size: 3em;
            text-align: center;
            transform-origin: 50% 50%;
            transform: translateY(-50%) rotateZ(-11.25deg);
        }
        h1 l {
            color: red;
        }
        input[type='range'] {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }
        input[type='range'] {
            overflow: hidden;
            box-sizing: padding-box;
            height: 3em;
            width: 20em;
            padding: 0 0.5em;
            background: white;
            border: transparent solid 0;
            box-shadow: 0 0 0 0.25em black;
            border-radius: 0.5em;
            -webkit-filter: blur(0.25em) contrast(10);
            filter: blur(0.25em) contrast(10);
            background-clip: padding-box;
            overflow: visible;
        }
        input[type='range'],
        input[type='range']::before,
        input[type='range']::after,
        input[type='range'] /deep/ *,
        input[type='range'] /deep/ *::before,
        input[type='range'] /deep/ *::after {
            box-sizing: border-box;
        }
        input[type='range']:not(*:root) {
            font-size: 1em;
        }
        @supports (-moz-appearance: meterbar) {
            input[type='range'] {
                font-size: 1em;
            }
        }
        _:-ms-input-placeholder,
        :root input[type='range'] {
            font-size: 1em;
        }
        input[type='range']:not(*:root) {
            -webkit-appearance: none;
        }
        input[type='range']:not(*:root):focus {
            outline: none;
        }
        input[type='range']::-webkit-slider-runnable-track {
            -webkit-appearance: none;
            position: relative;
            z-index: 1;
        }
        input[type='range']::-webkit-slider-runnable-track::after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: inherit;
            height: inherit;
            border-radius: inherit;
            z-index: -1;
        }
        input[type='range']::-webkit-slider-thumb {
            -webkit-appearance: none;
            position: relative;
            z-index: -1;
        }
        input[type='range']::-webkit-slider-thumb::before {
            content: "";
            transform: translateX(-100%);
            display: block;
            z-index: -1;
        }
        input[type='range']::-moz-range-track {
            z-index: -1;
        }
        input[type='range']::-ms-track {
            border: none;
            color: transparent;
        }
        input[type='range']::-ms-fill-lower {
            background: transparent;
        }
        input[type='range']::-webkit-slider-runnable-track {
            height: 3em;
            /***
          <svg id="track"
                xmlns="http://www.w3.org/2000/svg"
                width="200"
                height="30">
            <path d="M 10 15
                   q 45 7.5 90 0
                   q 45 -7.5 90 0"
                  stroke="black"
                  stroke-width="5"
                  stroke-linecap="round"
                  fill="none" />
            </svg>
          */

            width: 20em;
            background: white;
            background-image: url("");
            background-size: cover;
            background-position: 50% 50%;
            border: none;
            border-radius: inherit;
            background-clip: content-box;
        }
        input[type='range']::-moz-range-track {
            height: 3em;
            /***
          <svg id="track"
                xmlns="http://www.w3.org/2000/svg"
                width="200"
                height="30">
            <path d="M 10 15
                   q 45 7.5 90 0
                   q 45 -7.5 90 0"
                  stroke="black"
                  stroke-width="5"
                  stroke-linecap="round"
                  fill="none" />
            </svg>
          */

            width: 20em;
            background: white;
            background-image: url("");
            background-size: cover;
            background-position: 50% 50%;
            border: none;
            border-radius: inherit;
            background-clip: content-box;
        }
        input[type='range']::-ms-track {
            height: 3em;
            /***
          <svg id="track"
                xmlns="http://www.w3.org/2000/svg"
                width="200"
                height="30">
            <path d="M 10 15
                   q 45 7.5 90 0
                   q 45 -7.5 90 0"
                  stroke="black"
                  stroke-width="5"
                  stroke-linecap="round"
                  fill="none" />
            </svg>
          */

            width: 20em;
            background: white;
            background-image: url("");
            background-size: cover;
            background-position: 50% 50%;
            border: none;
            border-radius: inherit;
            background-clip: content-box;
        }
        input[type='range']::-webkit-slider-thumb {
            cursor: ew-resize;
            height: 3em;
            width: 1.5em;
            box-sizing: border-box;
            background: transparent;
            background-clip: padding-box;
            border-color: white;
            border-width: 0.375em;
            /***
          <svg id="track"
                xmlns="http://www.w3.org/2000/svg"
                width="200"
                height="30">
            <path d="M 10 15
                   q 45 7.5 90 0
                   q 45 -7.5 90 0"
                  stroke="red"
                  stroke-width="10"
                  stroke-linecap="round"
                  fill="none" />
            </svg>
          */

            border-style: solid;
            border-radius: 0;
            background-image: url("");
            background-size: 20em 3em;
            background-position: 50% 50%;
            background-attachment: fixed;
        }
        input[type='range']::-moz-range-thumb {
            cursor: ew-resize;
            height: 3em;
            width: 1.5em;
            box-sizing: border-box;
            background: transparent;
            background-clip: padding-box;
            border-color: white;
            border-width: 0.375em;
            /***
          <svg id="track"
                xmlns="http://www.w3.org/2000/svg"
                width="200"
                height="30">
            <path d="M 10 15
                   q 45 7.5 90 0
                   q 45 -7.5 90 0"
                  stroke="red"
                  stroke-width="10"
                  stroke-linecap="round"
                  fill="none" />
            </svg>
          */

            border-style: solid;
            border-radius: 0;
            background-image: url("");
            background-size: 20em 3em;
            background-position: 50% 50%;
            background-attachment: fixed;
        }
        input[type='range']::-ms-thumb {
            cursor: ew-resize;
            height: 3em;
            width: 1.5em;
            box-sizing: border-box;
            background: transparent;
            background-clip: padding-box;
            border-color: white;
            border-width: 0.375em;
            /***
          <svg id="track"
                xmlns="http://www.w3.org/2000/svg"
                width="200"
                height="30">
            <path d="M 10 15
                   q 45 7.5 90 0
                   q 45 -7.5 90 0"
                  stroke="red"
                  stroke-width="10"
                  stroke-linecap="round"
                  fill="none" />
            </svg>
          */

            border-style: solid;
            border-radius: 0;
            background-image: url("");
            background-size: 20em 3em;
            background-position: 50% 50%;
            background-attachment: fixed;
        }
        _:-ms-input-placeholder,
        :root input[type='range'] {
            padding: 0;
            box-shadow: 0 0 0.5em 0.25em black;
            border: 1px rgba(0, 0, 0, 0.5) solid;
            background: #fff;
        }
        input[type='range']::-ms-track {
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
<h1>
    <sup>the</sup>
    <l>N</l>inja<br />
    <l>C</l>urvy<l>S</l>lider
</h1>
<input type="range" value="33" />
</body>
</html>